<template>
  <div class="about">
    <div class="input">
      <InputBox @inputChange="inputChange" ref="input"/>
    </div>
    <div>
      <SelectColor @colorChange="colorChange"/>
    </div> 
    <div>
      <button :disabled="!this.disable"
      @click="add">{{this.disable?"许愿":"再想想"}}</button>
    </div>
    <div class="content" ref="content">
      <div v-for="(item,index) in cards"
      :key="index"
      class="card"
      :style="{left:item.x+'vw',top:item.y+'px',background:item.color}"
      @touchstart="ontouchstart($event,item)">{{item.content}}</div>
    </div>
  </div>
</template>

<script>
import InputBox from "../components/InputBox"
import SelectColor from "../components/SelectColor";
export default {
  components:{
    InputBox,
    SelectColor
  },
  data(){
    return{
      content:"",
      color:"",
      cards:[]
    }
  },
  computed:{
    disable:function(){
      if(this.content.length ===0 || this.color.length ===0){
        return false;
      }
      return true;
    }
  },
  methods:{
    inputChange(value){
      this.content = value;
    },
    colorChange(color){
      this.color = color;
    },
    getRandom(min,max){
      return Math.random()*(max-min+1)+min; 
    },
    add(){
      //获取卡片x、y轴位置 
      let x = this.getRandom(0,67);
      let y = this.getRandom(0,250);
      let cardObject = {
        color:this.color,
        content:this.content,
        x:x,
        y:y
      };

      this.cards.push(cardObject);
      this.color = "";
      this.content = "";
      this.$refs.input.value = "";
    },
    ontouchstart(e,item){
      console.log(item)
      let target = e.target;
      let content = this.$refs.content;
      console.log(e)
      let touchX = e.touches[0].pageX;
      let touchY = e.touches[0].pageY;
      console.log(touchX)
      console.log(touchY)

      let elementX  = e.target.offsetLeft;
      let elementY = e.target.offsetTop;

      let offsetX = touchX-elementX;
      let offsetY = touchY-elementY;

      document.addEventListener("touchmove",function(event){
        // console.log(event);
        // console.log(event.touches[0].pageX-offsetX)
        // console.log(event.touches[0].pageY-offsetY)
        let newX = event.touches[0].pageX-offsetX;
        let newY = event.touches[0].pageY-offsetY;
        if(newX<=0){
          newX = 0;
        }

        if(newX>=content.offsetWidth-target.offsetWidth){
          newX =content.offsetWidth-target.offsetWidth
        }

        console.log(content.offsetTop)
        console.log(newY)
        if(newY<= 0){
          newY = 0
        }

        if(newY>=content.offsetHeight-target.offsetHeight){
          newY = content.offsetHeight-target.offsetHeight
        }
        
        target.style.left = newX+"px"
        target.style.top = newY+"px"
        item.x=newX;
        item.y=newY;
      })
    }
  }
}
</script>


<style scoped>
.input
{
  margin-top: 80px;
}

.content
{
  width:100%;
  height: 300px;
  border:1px solid red;
  position: relative;
}

.card 
{
  width: 33vw;
  height: 100px;
  position: absolute;
  border: 1px solid red;
}
</style>